<template>
  <div id="msg">
    <ul>
      <li
        v-for="(msg,key) in msgs"
        :key="key"
      >
        <div v-if="msg.type==='tips'">
          <span>{{msg.id}}</span>
          <span>{{msg.data}}</span>
        </div>
        <div v-else>
          <span>{{`${msg.id}：`}}</span>
          <span>{{msg.data}}</span>
        </div>
      </li>
    </ul>
    <el-input
      v-model="input_val"
      placeholder="请输入内容"
      @keypress.enter.native="setMsg"
    >
    </el-input>
  </div>
</template>

<script>
export default {
  data () {
    return {
      c: {},
      ctx: {},
      msgs: [],
      input_val: ''
    }
  },
  props: ['answer'],
  methods: {
    setMsg () {
      let str = this.input_val.trim()
      if (str) {
        this.msgs.push({ id: '你', data: str, type: 'self' })
        this.$socket.emit('setMsg', { data: str })
        this.input_val = ''
      }
    }
  },
  sockets: {
    join (data) {
      this.msgs.push(data)
    },
    msg (data) {
      if (data.data === this.answer) {
        var str = ''
        for (var i = 0; i < this.answer.length; i++) {
          str += '*'
        }
        data.data = str
      }
      this.msgs.push(data)
      this.input_val = ''
    }
  }
}
</script>

<style scope>
#msg {
  width: 100%;
  height: 100%;
}
</style>
